<template>
  <div class="warp">
    <div class="header"></div>
    <div class="title">申请人信息</div>
    <div class="main-list">
      <div class="main-item">
        <div class="main-item-lable">申请人</div>
        <input class="main-item-input" type="text" />
      </div>
      <div class="main-item">
        <div class="main-item-lable">身份证号</div>
        <input class="main-item-input" type="text" />
      </div>
      <div class="main-item">
        <div class="main-item-lable">性别</div>
        <div class="main-item-radio">
          <van-radio-group v-model="radio">
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="main-item" @click="show=true">
        <div class="main-item-lable">婚姻状况</div>
        <input class="main-item-input" readonly type="text" />
        <van-icon name="arrow-down" size="16" color="#0882F3" />
      </div>
      <div class="main-item">
        <div class="main-item-lable">联系电话</div>
        <input class="main-item-input" type="text" />
      </div>
      <div class="main-item">
        <div class="main-item-lable">月收入</div>
        <input class="main-item-input" type="text" />
      </div>
      <div class="main-item">
        <div class="main-item-lable">年收入</div>
        <input class="main-item-input" type="text" />
      </div>
      <div class="main-item">
        <div class="main-item-lable">工作单位</div>
        <input class="main-item-input" type="text" />
      </div>
      <div class="main-item">
        <div class="main-item-lable">职务</div>
        <input class="main-item-input" type="text" />
      </div>
      <div class="main-item">
        <div class="main-item-lable">单位性质</div>
        <input class="main-item-input" type="text" />
      </div>
      <div class="main-item">
        <div class="main-item-lable">单位电话</div>
        <input class="main-item-input" type="text" />
      </div>
      <div class="main-item-type">
        <span>-----------</span>
        柳州市城镇户籍
        <span>-----------</span>
      </div>
      <div class="main-item">
        <div class="main-item-lable">实际居住地社区</div>
        <input class="main-item-input" type="text" />
      </div>
      <div class="main-item-type">
        <span>-----------</span>
        非柳州户籍
        <span>-----------</span>
      </div>
      <div class="main-item">
        <div class="main-item-lable">户籍所在地社区</div>
        <input class="main-item-input" type="text" />
      </div>
      <div class="main-item">
        <div class="main-item-lable">来柳居住时间</div>
        <input class="main-item-input" type="text" />
      </div>
    </div>
    <div class="main-add-list">
      <van-icon name="add-o" size="20" />
      <span>增加租房信息</span>
    </div>
    <div class="title">家庭情况</div>
    <div class="main-list">
      <div class="main-item-select">
        <div class="main-item-lable">房屋来源：</div>
        <van-radio-group v-model="source">
          <van-radio v-for="(item, index) in sourceList" :name="index" :key="index">{{item}}</van-radio>
        </van-radio-group>
      </div>
      <div class="main-item-select">
        <div class="main-item-lable">家庭属于：</div>
        <van-checkbox-group v-model="result">
          <van-checkbox v-for="(item, index) in list" :key="index" :name="item">{{ item }}</van-checkbox>
        </van-checkbox-group>
      </div>
    </div>
    <div class="footer">
      <div class="footer-btn" @click="saveForm">下一步</div>
    </div>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
  </div>
</template>

<script>
export default {
  name: 'applicantInfo',
  data () {
    return {
      radio: '',
      type: '',
      show: false,
      actions: [
        { name: '选项' },
        { name: '选项1' },
        { name: '选项2' }
      ],
      source: '',
      sourceList: ['一人户配租单间', '二人户配租一房一厅', '三人（含三人以上）户配租两房一厅'],
      list: ['孤寡', '孤儿', '重病', '残疾', '优抚对象', '低保', '外来务工', '新毕业大学生', '其他特殊对象'],
      result: []
    }
  },
  methods: {
    saveForm () {
      this.$router.push({
        path: 'publicHouseInfo'
      })
    },
    onSelect (item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.show = false
    }
  }
}
</script>

<style lang="stylus" scoped></style>
